<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="visible"
               v-loading="loading"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="30%">
      <el-form :model="formModel"
               label-position="right"
               ref="formModelRef"
               label-width="150px"
               :rules='formModelRules'>
        <el-form-item label="医生账号："
                      prop="doctorId">
          <el-select v-model="formModel.doctorId"
                     ref="selectDom"
                     placeholder="请输入医生账号"
                     filterable
                     remote
                     clearable
                     reserve-keyword
                     :remote-method="(query) => {remoteMethod(query, 'doctorId')}"
                     :loading="loading1"
                     class="w-200"
                     @change="val=>handleSelect(val, 'doctorId')">
            <el-option v-for="item in optionsFilter"
                       :key="item.doctorId"
                       :label="item.doctorName"
                       :value="item.doctorId">
            </el-option>
          </el-select>
          <el-button type="primary"
                     @click="remoteMethod(formModel.doctorId, 'doctorId')">查 询</el-button>
        </el-form-item>
        <el-form-item label="已选账号："
                      v-if="dataList.length> 0">
          <el-card>
            <div v-for="item in dataList"
                 :key="item.doctorId">
              <p>医生姓名：{{item.doctorName}}</p>
              <p>医生职级：{{item.doctorTitleName}}</p>
              <p>所属科室：{{item.departmentName}}</p>
              <p>所属医院：{{item.hospitalName}}</p>
            </div>
          </el-card>
        </el-form-item>
      </el-form>

      <p align="center"
         class="mt-20">
        <el-button @click="modalClose"
                   type="info">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm">保 存</el-button>
      </p>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'featuredDialog', // 精选医生弹窗
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        title: '新 增',
        loading: false,
        loading1: false,
        formModel: {
          doctorId: '',
          loginName: '',
        },
        formModelRules: {
          doctorId: [{ required: true, message: '请输入医生账号', trigger: 'blur' }],
        },
        options: [],
        optionsFilter: [],
        pageIndex: 1,
        pageSize: 20,
        dataList: []
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      // 保存
      submitForm () {
        this.$refs.formModelRef.validate(async (valid) => {
          if (valid) {
            // 新增
            const { data: res } = await this.post(this.api.doctorManager.addWellChosenDoctor, this.formModel);
            if (res.code === '200') {
              this.$message.success('保存成功!');
              this.$parent.getList(); // 调用父件组方法
              this.modalClose();
            }
          }
        })
      },

      // 远程搜索参与公司
      remoteMethod (query, type) {
        if (query !== '') {
          let _this = this;
          if (query) {
            if (type === 'doctorId') {
              _this.loading1 = true;
              this.post(this.api.doctorManager.searchDoctor, {
                loginName: query,
                pageIndex: this.pageIndex - 1,
                pageSize: this.pageSize
              }).then(res => {
                if (res.data.code === '200') {
                  _this.loading1 = false;
                  _this.options = res.data.object;
                }
              })
              setTimeout(() => {
                _this.loading1 = false;
                _this.optionsFilter = _this.options;
                // _this.optionsFilter = _this.options.filter(item => item.doctorName.indexOf(query) > -1);
              }, 200)
            }
          }
        } else {
          if (type === 'doctorId') {
            this.optionsFilter = [];
          }
        }
      },
      handleSelect (item, option) {
        if (option === 'doctorId') {
          this.formModel.doctorId = item;
          this.dataList = this.optionsFilter.filter(el => el.doctorId === item);
        }
      }
    },
    created () {
    },
  }
</script>
<style scoped lang="scss">
</style>